<template>
  <div>
    <el-container>
      <!-- <el-header>
        <div class="home_header_container">
          <i class="el-icon-d-arrow-left" @click="onClickHide"></i>
        </div>
      </el-header> -->
      <el-container>
        <!-- <el-aside width="200" ref="aside">
          <div>
            <el-menu
            background-color="#D3DCE6"
              default-active="1"
              class="el-menu-vertical-demo"
              :collapse="isCollapse"
            >
              <el-menu-item index="1">
                <i class="el-icon-menu"></i>
                <span slot="title">导航一</span>
              </el-menu-item>
            </el-menu>
          </div>
        </el-aside> -->
        <el-main ref="main">
          <div>
            <el-table :data="ShowList" border style="width: 100%">
              <el-table-column prop="id" label="ID" width="50"></el-table-column>
              <el-table-column prop="username" label="用户名" width="120"></el-table-column>
              <el-table-column prop="role_name" label="姓名" width="120"></el-table-column>
              <el-table-column prop="mobile" label="手机号"></el-table-column>
              <el-table-column prop="email" label="邮箱号"></el-table-column>
              <el-table-column
                prop="create_time"
                label="创建时间"
              ></el-table-column>
              <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    @click="onClick(scope.row)"
                    >删除</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    @click="onClickShow(scope.row)"
                    >编辑</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

            <el-pagination
              background
              :page-size="5"
              layout="prev, pager, next, jumper"
              :total="users.length"
              @current-change="onChangePage"
            >
            </el-pagination>
          </div>
        </el-main>
      </el-container>
    </el-container>

    <el-dialog
      title="编辑信息"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="ID" prop="id">
            <el-input v-model="ruleForm.id" disabled></el-input>
          </el-form-item>
          <el-form-item label="用户名" prop="users">
            <el-input v-model="ruleForm.users"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="username">
            <el-input v-model="ruleForm.username"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="ruleForm.mobile"></el-input>
          </el-form-item>
          <el-form-item label="邮箱号" prop="email">
            <el-input v-model="ruleForm.email"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onClickHidden">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
  data() {
    return {
      isCollapse: false, //默认显示
      dialogVisible: false,
      ruleForm: {
        id: "",
        users: "",
        username: "",
        mobile: "",
        email: "",
      },
      rules: {
        users: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        username: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        email: [{ required: true, message: "请输入邮箱号", trigger: "blur" }],
      },
    };
  },
  mounted() {
    // 请求数据
    this.$store.dispatch("GETDATA");
  },
  methods: {
    onClickHide() {
      //点击隐藏
      this.isCollapse = !this.isCollapse;
    },
    onChangePage(page) {
      //点击改变分页器的页码
      // console.log(page);
      this.$store.commit("CHANGEPAGE", page);
    },
    onClick(item) {
      //点击删除
      // console.log(item);
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.commit("ONDELETE", item);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    onClickShow(item) {
      //点击显示
      // console.log(item);
      this.dialogVisible = true;
      this.ruleForm.id = item.id;
      this.ruleForm.users = item.username;
      this.ruleForm.username = item.role_name;
      this.ruleForm.mobile = item.mobile;
      this.ruleForm.email = item.email;
    },
    onClickHidden() {
      //点击隐藏
      this.dialogVisible = false;
      console.log(this.ruleForm);
      this.$store.commit("ONCHANGECOUNT", this.ruleForm);
    },
    handleClose(done) {
      //关闭对话框
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
  computed: {
    //从vuex中读取数据
    users() {
      return this.$store.state.users;
    },
    ShowList() {
      return this.$store.getters.ShowList;
    },
  },
};
</script>
<style lang="scss" scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  height: 10vh;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  height: 90vh;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  height: 90vh;
}
.home_header_container {
  width: 100%;
  height: 100%;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
}
</style>
